<template>
    <div class="science-list">
        <div class="list-container">
            <div class="acdemic-content">
                <div class="academic-list">
                    <div v-for="item in items" :key="item.id" class="academic-card">
                        <div class="content">
                            <NuxtLink :to="getDetailPath(item)" class="link">
                                <div class="img">
                                    <img :src="fileBase + item.image" alt="">
                                </div>
                                <div class="info">
                                    <p class="title">{{ item.title }}</p>
                                    <div class="tags">
                                        <div v-for="tag in item.tags" class="label"
                                        :style="{
                                            border:`1px solid ${tag.color}`,
                                            color:tag.color
                                            }">
                                        {{tag.name}}</div>
                                    </div>
                                    <div class="meta">
                                        <span class="date">
                                            <img src="/icon/index/icon1.png" alt='' />
                                            {{ formatDate(item.publishDate)}}
                                        </span>
                                        <!-- <span class="download" v-if="item.channel?.articleModel.code =='kpzykj' || item.channel?.articleModel.code =='kpzysp'">
                                            <img src="/icon/index/icon2.png" alt='' /> 
                                            已下载{{item.downloads}}次
                                        </span> -->
                                        <span class="download">
                                            <img src="/icon/detail/eye.png" alt='' /> 
                                            浏览 {{item.views}} 次
                                        </span>
                                    </div>
                                </div>
                            </NuxtLink>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { formatDate } from '@/utils/date'
const localePath = useLocalePath();
const { fileBase } = useRuntimeConfig().public
const props = defineProps({
    items: {
        type: Array,
        required: true
    },
    type: {
        type: String,
        default: 'common'
    },
    prevtype: {
        type: String,
        default: 'party'
    }
})


const getDetailPath = (item) => {
    return localePath(`/${props.prevtype}/${props.type}/${item.id}`)
}


</script>

<style lang="scss">
.science-list {
    padding: 1rem 0;

    .list-container {
        .acdemic-content {
            width: 100%;
            margin-top: 1rem;

            .name {
                font-size: 1rem;
                color: #666666;
                margin-bottom: 1rem;
                font-weight: bold;
            }

            .academic-list {
                gap: 1.5rem;
                display: grid;
                grid-template-columns: repeat(3, 1fr);
            }

            .academic-card {
                // width:calc((100% - 3 * 20px) / 4);
                background: white;
                border-radius: 5px;
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
                transition: transform 0.3s;
                cursor: pointer;

                &:hover {
                    transform: translateY(-5px);
                }

                .content {
                    a {
                        text-decoration-line: none;
                    }

                    .img {
                        width: 100%;
                        height: 11rem;

                        img {
                            width: 100%;
                            height: 100%;
                            border-radius: 5px 5px 0 0;
                            overflow: hidden;
                        }
                    }

                    .info {
                        padding: .5rem;
                        .title {
                            color: #333;
                            font-size: 1rem;
                            height: 3rem;
                            line-height: 1.6;
                            margin-bottom: .5rem;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            display: -webkit-box;
                            -webkit-box-orient: vertical;
                            -webkit-line-clamp: 2;
                        }
                        .tags {
                            display: flex;
                            flex-wrap: wrap;
                            margin-bottom:.5rem;
                            height: 1.5rem;
                            .label {
                                color: #999;
                                font-size: .8rem;
                                border-radius: 5px;
                                display: inline-block;
                                padding: 2px .5rem;
                                margin-right: .3rem;
                            }
                        }

                        .meta {
                            display: flex;
                            justify-content: space-between;
                            align-items: center;
                            color: #666;
                            font-size: 1rem;

                            img {
                                width: 1.1rem;
                                height: 1.1rem;
                                vertical-align: -3px;
                                margin-right: .2rem;
                            }

                            .download {
                                
                                color: #666;
                                text-decoration: none;
                                font-size: 1rem;
                            }
                        }
                    }
                }
            }
        }
    }
}

@media (max-width: 768px) {
    .science-list{
        padding:0;
        .list-container{
            .acdemic-content{
                .academic-list{
                    grid-template-columns: repeat(1, 1fr);
                    gap:.8rem;
                    .academic-card{
                        .content{
                            .img{
                               height: 14rem;
                            }
                        }
                    }
                }
            }
        }
    }

    
}
</style>